<template>
	<div class="role-tree">
		<Tree
			:data="tree"
			ref="tree"
			@on-check-change="changeCheck"
			show-checkbox
			expand-node
		></Tree>
	</div>
</template>

<script>
import { getJsonMenuList } from '@/api/business/system'
import { pageInfo } from '@/config'

export default {
	name: 'roleTree',
	data() {
		return {
			pageInfo: pageInfo,
			tempTree: [],
			tree: []
		}
	},
	props: {
		resourceIdList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	mounted() {
		this.getJsonMenuListApi()
	},
	methods: {
		getCheckedAndIndeterminateNodes() {
			let arr = []
			let nodes = this.$refs['tree'].getCheckedAndIndeterminateNodes()
			nodes.forEach((val) => {
				console.log(val)
				arr.push(val.id)
				val.buttonList.forEach((v) => {
					if (v.selected) arr.push(v.id)
				})
			})
			this.$emit('onOver', arr)
		},
		readNodes(nodes = [], arr = []) {
			for (let item of nodes) {
				item.expand = true
				item.title = item.name
				item.selected = false

				if (this.resourceIdList.filter((v) => v.id == item.id).length) {
					let menu = this.resourceIdList.find((v) => v.id === item.id)
					if (!(item.children && item.children.length)) {
						item.checked = true
						item.buttonList.map((v) => {
							v.selected = false
							for (let i = 0; i < menu.button.length; i++) {
								if (v.id === menu.button[i]) {
									v.selected = true
								}
							}
							return v
						})
					}
				}
				item.render = (h, { root, node, data }) => {
					let checkbox = []

					data.buttonList.forEach((item) => {
						checkbox.push(
							h(
								'checkbox',
								{
									props: {
										value: item.selected
									},
									nativeOn: {
										click: () => {
											console.log(data)
										}
									},
									on: {
										'on-change': (v) => {
											item.selected = v
										}
									}
								},
								item.buttonName
							)
						)
					})

					return h(
						'div',
						{
							style: {
								transition: 'all .4s',
								margin: '25px 0 0 -40rpx',
								height:
									data.resourceType && data.checked === 2 ? '30px' : 'unset'
							}
						},
						[
							h(
								'div',
								data.resourceType === 2
									? [
											h(
												'div',
												{
													style: {
														display: 'inline-block',
														width: '100%',
														position: 'absolute',
														top: 0,
														left: '45px'
													}
												},
												data.name
											),
											data.checked
												? h(
														'div',
														{
															style: {
																margin: '25px 0 0 0',
																display: 'flex',
																width: '400px',
																alignItems: 'center',
																flexWrap: 'wrap'
															}
														},
														checkbox
												  )
												: ''
									  ]
									: {
											style: {
												width: '100%',
												position: 'absolute',
												top: 0,
												left: '45px'
											}
									  },
								data.name
							)
						]
					)
				}
				if (item.children && item.children.length)
					this.readNodes(item.children, arr)
			}
		},
		getJsonMenuListApi() {
			return new Promise((resolve) => {
				getJsonMenuList({}).then((res) => {
					if (res.code === 1) {
						this.tempTree = res.data
						this.readNodes(this.tempTree)
						this.tree = this.$cu.deepClone(this.tempTree)
						this.$emit('onReady')
						resolve()
					}
				})
			})
		},
		changeCheck(checkRow, item) {
			if (!item.checked) {
				item.buttonList.forEach((item) => {
					item.selected = false
				})
			}
		}
	}
}
</script>

<style scoped lang="less"></style>
